<template>
  <form-model
    ref="createModal"
    :formTitle="$t('uploadFile')"
    :width="608"
    :form="formUploadFile"
    :rules="uploadRules"
    @ok="uploadOk"
  >
    <!-- 摘要算法 -->
    <a-form-model-item
      :label="$t('zysf')"
      prop="hashAlgorithm"
    >
      <a-select
        v-model="formUploadFile.hashAlgorithm"
        showSearch
        allow-clear
        :placeholder="$t('pleaseSelect')"
        optionFilterProp="children"
        :filterOption="$commonFun.filterOption"
        style="width: 100%"
      >
        <a-select-option
          v-for="(key,val,index) in digestAlgorithm"
          :key="index"
          :value="parseInt(val,10)"
        >
          {{ key }}
        </a-select-option>
      </a-select>
    </a-form-model-item>
    <a-checkbox
      style="position:absolute;right:0"
      :checked="isManualEntry"
      @change="isManualEntry=$event.target.checked">
      {{ $t('manualInput') }}
    </a-checkbox>
    <!-- 摘要值 -->
    <a-form-model-item
      :label="$t('zyz')"
    >
      <!-- 手动输入 -->
      <a-textarea
        v-if="isManualEntry"
        style="width: 100%"
        v-model="formUploadFile.checksum"
        :placeholder="$t('pleaseInput')"
        :rows="4"
      >
      </a-textarea>
      <!-- 自动填充 -->
      <a-textarea
        v-else
        style="width: 100%"
        disabled
        :rows="4"
        v-model="fileInfor.fileObject[digestAlgorithm[formUploadFile.hashAlgorithm]]"
      ></a-textarea>
    </a-form-model-item>
    <!-- 上传文件 -->
    <a-form-model-item>
      <template slot="label">
        <span class="requiredSty">
          {{ $t('uploadFile') }}
        </span>
      </template>
      <a-input
        ref="userNameInput"
        readOnly
        :value="fileInfor.fileObject.fileName"
      >
        <a-icon
          @click="upload"
          slot="suffix"
          type="upload"
        />
      </a-input>
      <chunk-upload
        ref="uploadPlug"
        :showDom="false"
        fileStoreField="fileObject"
        :recordData="fileInfor"
        :size="5*1024*1024*1024"
        :hashAlgorithm="formUploadFile.hashAlgorithm"
      >
      </chunk-upload>
    </a-form-model-item>
  </form-model>

</template>
<script>
import FormModel from '@/components/SelfModal/FormModel'
import ChunkUpload from '@/components/Upload/ChunkUpload'
import { mapState } from 'vuex'
const initForm = {
  hashAlgorithm: 1
}
export default {
  name: 'UploadVersionFile',
  components: { FormModel, ChunkUpload },
  computed: {
    ...mapState({
      // 摘要算法
      digestAlgorithm: (state) => state.dict.digestAlgorithm
    })
  },
  data () {
    return {
      formUploadFile: { ...initForm },
      fileInfor: { fileObject: {} },
      uploadRules: {
        hashAlgorithm: [{ required: true, message: this.$t('pleaseInput') }]
      },
      isManualEntry: false
    }
  },
  watch: {
    'formUploadFile.hashAlgorithm': {
      handler () {
        // 切换算法后 重新上传文件
        this.fileInfor = { fileObject: {} }
        this.$refs.uploadPlug.resetUpload()
      }
    }
  },
  methods: {
    addFiles () {
      this.fileInfor = { fileObject: {} }
      this.formUploadFile = { ...initForm }
      this.$refs.createModal.visible = true
    },
    upload () {
      this.$refs.uploadPlug.upload()
    },
    uploadOk () {
      const vm = this
      const values = { ...vm.formUploadFile }
      if (vm.fileInfor.fileObject.fileId) {
        values.fileId = vm.fileInfor.fileObject.fileId
        values.fileName = vm.fileInfor.fileObject.fileName // 文件名
        // 如果是自动填充需要用生成的摘要值
        if (!vm.isManualEntry) {
          values.checksum = vm.fileInfor.fileObject[vm.digestAlgorithm[vm.formUploadFile.hashAlgorithm]]
        }
        // 手动输入时需要校验
        if (values.checksum !== vm.fileInfor.fileObject[vm.digestAlgorithm[vm.formUploadFile.hashAlgorithm]]) {
          vm.$message.warning(vm.$t('summaryIn'))
          return
        }
        vm.$emit('saveFile', values)
        vm.$refs.createModal.visible = false
        vm.fileInfor = { fileObject: { uploadLoadding: false } }
        vm.$refs.uploadPlug.resetUpload()
      } else {
        vm.$message.warning(vm.$t('pleaseUpload') + vm.$t('file'))
      }
    }
  }
}
</script>
